<template>
  <div class="accountMoney">
    <!-- <div class="title">
      <navTitle :navArr="navArr"></navTitle>
    </div> -->
    <!-- <ul class="nav">
      <li @click="change(item.value)" :class="{ 'active': type == item.value }" v-for="(item, index) in tabsArr" :key="index">{{ item.name }}</li>
    </ul> -->
    <h2>
      <strong>{{ type == 1 ? '账户充值' : type == 2 ? '资金流水' : '--' }}</strong>
      <span @click="change(type == 1 ? 2 : 1)">{{ type == 2 ? '账户充值' : type == 1 ? '资金流水' : '--' }}</span>
    </h2>
    <h6>
      <span>当前账户：</span>
      <strong>{{ userInfo.userName || '--' }}</strong>
    </h6>
    <h6>
      <span>账户余额：</span>
      <b>￥ {{ sellerInfo.balance || '--' }}</b>
    </h6>
    <div class="content" v-if="type==1">
      <!-- <headsTitle title="支付方式">
        <div class="payway" slot="content"> -->
      <rechargeBase></rechargeBase>
      <!-- </div>
      </headsTitle> -->
    </div>
    <div class="accountDetail" v-if="type==2">
      <accountDetail></accountDetail>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import NavTitle from '../../base/navTitle/index'
import HeadsTitle from '../../base/headsTitle/index'
import RechargeBase from './base/rechargeBase'
import AccountDetail from './base/accountDetail'
import { mapGetters } from 'vuex'
export default {
  name: 'accountMoney',
  components: {
    NavTitle,
    HeadsTitle,
    RechargeBase,
    AccountDetail
  },
  computed: {
    ...mapGetters([
      'userInfo',
      'sellerInfo'
    ])
  },
  data () {
    return {
      navArr: ['资金账户'],
      type: 1,
      tabsArr: [
        {
          name: '充值',
          value: 1
        },
        {
          name: '资金流水',
          value: 2
        }
      ]
    }
  },
  methods: {
    change (value) {
      this.type = value
    }
  },
  mounted () {
    if (this.$route.query.type) {
      this.type = this.$route.query.type
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../assets/stylus/index.styl'
.accountMoney
  .nav
    margin-top 24px
    margin-bottom 20px
    display flex
    li
      width 150px
      text-align center
      border 1px solid $fontColor-gray
      fontSize($fontSize-l, 40px, $fontColor)
      margin-right 40px
      font-weight bold
      cursor pointer
      transition all 0.3s
    .active
      border-color $mainColor
      color $mainColor
  h2
    display flex
    align-items center
    line-height 30px
    margin-bottom 10px
    strong
      fontSize(22px, 30px, #333333)
      margin-right 15px
    span
      fontSize(12px, 18px, #333333)
      padding-left 10px
      border-left 1px solid #eeeeee
      cursor pointer
      transition all 0.2s
      &:hover
        color $mainColor
  h6
    display flex
    align-items center
    span
      fontSize(14px, 20px, #666666)
    strong
      fontSize(16px, 22px, #333333)
      font-weight bold
    b
      fontSize(20px, 24px, $mainColor)
      font-weight bold
</style>
